<div>
    <app-modal-alert></app-modal-alert>
    <form clrForm #istioForm="ngForm" style="margin-top: 30px;">
        <clr-accordion clrLoading="accordionLoading" clrAccordionMultiPanel="true"> 
            <clr-accordion-panel clrAccordionPanelOpen=true>
                <clr-accordion-title>istio-pilot</clr-accordion-title>
                <clr-accordion-content *clrIfExpanded> 
                    <div class="trigger-item" *ngIf="pilotCfg.cluster_istio.status === 'Failed'">
                        <clr-signpost>
                            <button class="btn btn-sm btn-danger" style="margin-top: 10px;" clrSignpostTrigger>{{"APP_FAILED"|translate}}</button>
                            <clr-signpost-content style="max-width: 50rem;" *clrIfOpen>{{pilotCfg.cluster_istio.message}}</clr-signpost-content>
                        </clr-signpost>
                    </div>
                    
                    <clr-input-container class="clr-col-6" style="float: left;">
                        <label>{{"APP_ISTIO_CPU_LIMIT"|translate}}</label>
                        <input clrInput name="pilot-limits-cpu" oninput="if(value<0)value=500" type="number" [(ngModel)]="pilotCfg.vars['pilot.resources.limits.cpu']" required/>
                    </clr-input-container>
                    <clr-input-container class="clr-col-6" style="float: left;">
                        <label>{{"APP_ISTIO_MEMERY_LIMIT"|translate}}</label>
                        <input clrInput name="pilot-limits-memory" oninput="if(value<0)value=2048" type="number" [(ngModel)]="pilotCfg.vars['pilot.resources.limits.memory']" required/>
                    </clr-input-container>

                    <clr-input-container class="clr-col-6" style="float: left;">
                        <label>{{"APP_ISTIO_CPU_REQUEST"|translate}}</label>
                        <input clrInput  name="pilot-requests-cpu" oninput="if(value<0)value=500" type="number" [(ngModel)]="pilotCfg.vars['pilot.resources.requests.cpu']" required/>
                    </clr-input-container>
                    <clr-input-container class="clr-col-6" style="float: left;">
                        <label>{{"APP_ISTIO_MEMERY_REQUEST"|translate}}</label>
                        <input clrInput name="pilot-requests-memory" oninput="if(value<0)value=2048" type="number" [(ngModel)]="pilotCfg.vars['pilot.resources.requests.memory']" required/>
                    </clr-input-container>

                    <clr-input-container class="clr-col-6" style="float: left;margin-bottom: 10px;">
                        <label>{{"APP_ISTIO_TRACE_SAMPLING"|translate}}</label>
                        <input clrInput name="pilot-trace" oninput="if(value<0)value=1" type="number" [(ngModel)]="pilotCfg.vars['pilot.traceSampling']" required/>
                    </clr-input-container>
                </clr-accordion-content>
            </clr-accordion-panel>

            <clr-accordion-panel clrAccordionPanelOpen=true>
                <clr-accordion-title>istio-ingress</clr-accordion-title>
                <clr-accordion-content *clrIfExpanded>
                    <clr-toggle-container>
                        <clr-toggle-wrapper>
                            <label>{{ingressAbleText}}</label>
                            <input type="checkbox" clrToggle name="ingress-checkbox" (change)="changeIngress()" [(ngModel)]="ingressCfg.enable"/>
                        </clr-toggle-wrapper>
                    </clr-toggle-container>
                    <span *ngIf="ingressCfg.cluster_istio.status === 'Initializing'">
                        <clr-spinner clrAssertive clrInline></clr-spinner>
                        {{"APP_INITIALIZING" | translate}}
                    </span>
                    <span *ngIf="ingressCfg.cluster_istio.status === 'Terminated'">
                            <clr-spinner clrAssertive clrInline></clr-spinner>
                        {{"APP_TERMINATING" | translate}}
                    </span>
                    <div class="trigger-item" *ngIf="ingressCfg.cluster_istio.status === 'Failed'">
                        <clr-signpost>
                            <button class="btn btn-sm btn-danger" style="margin-top: 10px;" clrSignpostTrigger>{{"APP_FAILED"|translate}}</button>
                            <clr-signpost-content style="max-width: 50rem;" *clrIfOpen>{{ingressCfg.cluster_istio.message}}</clr-signpost-content>
                        </clr-signpost>
                    </div>

                    <div *ngIf="ingressCfg.enable || ingressCfg.cluster_istio.status !== 'Waiting'">
                        <clr-input-container  class="clr-col-6" style="float: left;">
                            <label>{{"APP_ISTIO_CPU_LIMIT"|translate}}</label>
                            <input clrInput name="ingress-limits-cpu" oninput="if(value<0)value=2000" type="number" [(ngModel)]="ingressCfg.vars['gateways.istio-ingressgateway.resources.limits.cpu']" required/>
                        </clr-input-container>
                        <clr-input-container class="clr-col-6" style="float: left;">
                            <label>{{"APP_ISTIO_MEMERY_LIMIT"|translate}}</label>
                            <input clrInput name="ingress-limits-memory" oninput="if(value<0)value=1024" type="number" [(ngModel)]="ingressCfg.vars['gateways.istio-ingressgateway.resources.limits.memory']" required/>
                        </clr-input-container>
                        
                        <clr-input-container class="clr-col-6" style="float: left;">
                            <label>{{"APP_ISTIO_CPU_REQUEST"|translate}}</label>
                            <input clrInput name="ingress-requests-cpu" oninput="if(value<0)value=100" type="number" [(ngModel)]="ingressCfg.vars['gateways.istio-ingressgateway.resources.requests.cpu']" required/>
                        </clr-input-container>
                        <clr-input-container class="clr-col-6" style="float: left;">
                            <label>{{"APP_ISTIO_MEMERY_REQUEST"|translate}}</label>
                            <input clrInput name="ingress-requests-memory" oninput="if(value<0)value=128" type="number" [(ngModel)]="ingressCfg.vars['gateways.istio-ingressgateway.resources.requests.memory']" required/>
                        </clr-input-container>
                        <clr-select-container class="clr-col-6" style="float: left;margin-bottom: 10px;">
                            <label>{{"APP_ISTIO_GATEWAY_TYPE"|translate}}</label>
                            <select clrSelect  class="clr-select" name="ingress-type" [(ngModel)]="ingressCfg.vars['gateways.istio-ingressgateway.type']" required>
                                <option>NodePort</option>
                                <option>LoadBalancer</option>
                            </select>
                        </clr-select-container>
                    </div>
                </clr-accordion-content>
            </clr-accordion-panel>

            <clr-accordion-panel clrAccordionPanelOpen=true>
                <clr-accordion-title>istio-egress</clr-accordion-title>
                <clr-accordion-content *clrIfExpanded>
                    <clr-toggle-container>
                        <clr-toggle-wrapper>
                            <label>{{egressAbleText}}</label>
                            <input type="checkbox" clrToggle name="egress-checkbox" (change)="changeEgress()" [(ngModel)]="egressCfg.enable"/>
                        </clr-toggle-wrapper>
                    </clr-toggle-container>
                    <span *ngIf="egressCfg.cluster_istio.status === 'Initializing'">
                        <clr-spinner clrAssertive clrInline></clr-spinner>
                        {{"APP_INITIALIZING" | translate}}
                    </span>
                    <span *ngIf="egressCfg.cluster_istio.status === 'Terminated'">
                            <clr-spinner clrAssertive clrInline></clr-spinner>
                        {{"APP_TERMINATING" | translate}}
                    </span>
                    <div class="trigger-item" *ngIf="egressCfg.cluster_istio.status === 'Failed'">
                        <clr-signpost>
                            <button class="btn btn-sm btn-danger" style="margin-top: 10px;" clrSignpostTrigger>{{"APP_FAILED"|translate}}</button>
                            <clr-signpost-content style="max-width: 50rem;" *clrIfOpen>{{egressCfg.cluster_istio.message}}</clr-signpost-content>
                        </clr-signpost>
                    </div>

                    <div *ngIf="egressCfg.enable || egressCfg.cluster_istio.status !== 'Waiting'">
                        <clr-input-container class="clr-col-6" style="float: left;">
                            <label>{{"APP_ISTIO_CPU_LIMIT"|translate}}</label>
                            <input clrInput name="egress-limits-cpu" oninput="if(value<0)value=2000" type="number" [(ngModel)]="egressCfg.vars['gateways.istio-egressgateway.resources.limits.cpu']" required/>
                        </clr-input-container>
                        <clr-input-container class="clr-col-6" style="float: left;">
                            <label>{{"APP_ISTIO_MEMERY_LIMIT"|translate}}</label>
                            <input clrInput name="egress-limits-memory" oninput="if(value<0)value=1024" type="number" [(ngModel)]="egressCfg.vars['gateways.istio-egressgateway.resources.limits.memory']" required/>
                        </clr-input-container>
                        
                        <clr-input-container class="clr-col-6" style="float: left;">
                            <label>{{"APP_ISTIO_CPU_REQUEST"|translate}}</label>
                            <input clrInput name="egress-requests-cpu" oninput="if(value<0)value=100" type="number" [(ngModel)]="egressCfg.vars['gateways.istio-egressgateway.resources.requests.cpu']" required/>
                        </clr-input-container>
                        <clr-input-container class="clr-col-6" style="float: left;">
                            <label>{{"APP_ISTIO_MEMERY_REQUEST"|translate}}</label>
                            <input clrInput name="egress-requests-memory" oninput="if(value<0)value=128" type="number" [(ngModel)]="egressCfg.vars['gateways.istio-egressgateway.resources.requests.memory']" required/>
                        </clr-input-container>
                    </div>
                </clr-accordion-content>
            </clr-accordion-panel>
        </clr-accordion>
    </form>
</div>

<button class="btn btn-sm btn-primary" [disabled]="btnStartDisable" *ngIf="!baseCfg.enable" type="button"  (click)="submit('start')">{{'APP_ENABLE'|translate}} Istio</button>
<button class="btn btn-sm btn-primary" [disabled]="btnStartDisable" *ngIf="baseCfg.enable" type="button"  (click)="submit('restart')">{{'APP_ISTIO_RESAVE'|translate}}</button>
<button class="btn btn-sm btn-danger" [disabled]="btnStopDisable" *ngIf="baseCfg.enable" type="button"  (click)="stopIstio()">{{'APP_DISABLE'|translate}} Istio</button>



